<template>
  <div style="width:100%;height:100vh">
    <button @click="getData">添加</button>
    <vue-waterfall-easy 
      ref="waterfall"
      :imgs-arr="imgsArr" 
      @scrollReachBottom="getData">
      <div 
        slot-scope="props" 
        class="img-info">
        <p class="some-info">第{{ props.index+1 }}张图片</p>
        <p class="some-info">{{ props.value.info }}</p>
      </div>
      <div 
        slot="waterfall-over" 
        style="margin-bottom:50px">waterfall-over</div>
    </vue-waterfall-easy>
  </div>
</template>

<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
  components: {
    vueWaterfallEasy
  },
  data() {
    return {
      imgsArr: [
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        }
      ],
      group: 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      console.log(this.group)
      this.group++
      let a = [
        {
          src: 'images/fhometop1.png',
          href: ''
        },
        {
          src: 'images/fhometop2.png',
          href: ''
        },
        {
          src: 'images/fhometop3.png',
          href: ''
        }
      ]
      if (this.group === 10) {
        // 模拟已经无新数据，显示 slot="waterfall-over"
        this.$refs.waterfall.waterfallOver()
        return
      }
      this.imgsArr = this.imgsArr.concat(a)
      console.log(this.imgsArr)
    }
  }
}
</script>

<style>
</style>
